import React, { useMemo, useState } from 'react';
interface AppInter {
  a: string;
  b: number;
}
interface TestFnInter {
  (a: string, b: string): string;
}

// APP2 对props的定义方式和APP相同  只是写法不同 更推荐大家使用 APP这种方法来定义
const App2: React.FC<AppInter> = (props) => {
  return <div>test{props.a}</div>;
};

const App = (props: AppInter) => {
  // 使用泛型来定义
  const [name, setName] = useState<string>('1');
  const nameUpper = useMemo<string>(
    () => name.substring(0, 1).toUpperCase(),
    [name],
  );
  // useCallback 仅做了解即可
  //   const a = useCallback<TestFnInter>(() => 'test', []);
  return (
    <div>
      {name}
      {nameUpper}
    </div>
  );
};

const test = () => {
  return (
    <div>
      <App a="fds" b={1} />
    </div>
  );
};

export default App;
